<template>
  <div>
    <img :src="image" class="index-c-img" fit="cover" />
    <div class="list-body">
      <div class="body-top">
        <div class="bodt-top-title">
          <div class="bodt-top-title-msg">产品中心</div>
          <div class="bodt-top-title-memo">products center</div>
        </div>
        <div class="body-input">
          <img
            src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/fangdajing%403x.png"
            class="body-input-icon"
          />
          <input
            v-model="keywords"
            placeholder="搜索产品款号/名称"
            class="body-input-input"
          />
        </div>
        <div class="body-search-btn" @click="search()">搜索</div>
      </div>
      <div class="list-bottom">
        <div class="list-left">
          <div
            :class="classify_id == 0 ? 'list-left-all active' : 'list-left-all'"
            @click="changeClassify(0)"
          >
            全部
          </div>
          <div v-for="(item, key) in classify" :key="key">
            <div
              :class="classify_id == item.id ? 'list-left-p active' : 'list-left-p'"
              @click="changeOpen(key)"
            >
              <div class="list-left-p-name">{{ item.name }}</div>
              <img
                src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/p2.png"
                :class="
                  item.open ? 'list-left-icon list-left-icon-open' : 'list-left-icon'
                "
              />
            </div>
            <div
              :style="
                item.open ? 'height:' + item.children.length * 40 + 'px' : 'height:0'
              "
              class="list-left-c"
            >
              <div
                :class="
                  items.id == classify_id ? 'list-left-c-item active' : 'list-left-c-item'
                "
                v-for="(items, keys) in item.children"
                :key="'c' + keys"
                @click="changeClassify(items.id)"
              >
                {{ items.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="list-right" v-if="list.data.length > 0">
          <div
            @click="detail(item.id)"
            v-for="(item, key) in list.data"
            :key="'g' + key"
            class="list-goods"
            :style="(key + 1) % 4 ? '' : 'margin-right:0'"
          >
            <el-image
              fit="cover"
              class="list-goods-cover"
              :src="item.image_first"
            ></el-image>
            <div class="list-goods-name">{{ item.title }}</div>
            <div class="list-goods-no">款号：{{ item.goods_sn }}</div>
          </div>
        </div>
        <div v-else class="right-empy">
          <img
            src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/goods-emtpy.png"
            class="goods-empty-icon"
          />
          <div class="right-empy-txt">暂无商品~</div>
        </div>
      </div>
      <div class="page-box1" v-if="list.data.length > 0">
        <div class="page-box2">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            layout="prev, pager, next"
            :total="list.total"
            :page-size="list.per_page"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: "",
      image: "",
      classify: [],
      classify_id: 0,
      list: {
        data: [],
        current_page: 1,
        total: 1,
        last_page: 0,
        per_page: 12,
      },
      text: "",
    };
  },
  mounted() {
    var id = this.$route.query.id;
    if (id) this.classify_id = id;
    // this.getBanner();
    // this.getClassify();
    // this.getGoods();
  },
  methods: {
    openProduct() {},
    changeClassify(id) {
      this.classify_id = id;
      this.list.current_page = 1;
      this.getGoods();
    },
    changePage(e) {
      this.list.current_page = e;
      this.getGoods();
    },
    search() {
      this.changePage(1);
    },
    getGoods() {
      this.ajaxs("Goods/list", {
        data: {
          page: this.list.current_page,
          category_id: this.classify_id,
          keywords: this.keywords,
          limit: 12,
        },
        success: (res) => {
          this.list = res.data;
        },
      });
    },
    changeOpen(index) {
      this.classify[index].open = !this.classify[index].open;
      this.$forceUpdate();
    },
    getClassify() {
      this.ajaxs("Category/index", {
        success: (res) => {
          this.classify = res.data;
          for (var i in this.classify) {
            this.classify[i].open = false;
            if (i == 0) this.classify[i].open = true;
          }
        },
      });
    },
    getBanner() {
      this.ajaxs("Index/banner", {
        data: {
          classify: 0,
        },
        success: (res) => {
          this.image = res.data.image;
        },
      });
    },
    detail(id) {
      this.$router.push({
        path: "/index/product/detail/" + id + "?classify=" + this.classify_id,
      });
    },
    getData() {
      this.ajaxs("Index/newsList", {
        data: {
          page: this.page,
          classify: this.tab_index,
          limit: 15,
        },
        success: (res) => {
          this.page = res.data.current_page;
          this.last_page = res.data.last_page;
          if (this.page == 1) this.list = res.data.data;
          else this.list = this.list.concat(res.data.data);
        },
      });
    },
    changeTab(index) {
      this.tab_index = index;
      this.page = 1;
      this.getData();
    },
  },
  watch: {
    $route() {
      var id = this.$route.query.id;
      if (id) this.classify_id = id;
      this.getBanner();
      this.getClassify();
      this.getGoods();
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/enterprise/index.css";
@import "../../assets/css/product/index.css";
</style>
